<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>COVID-19</title>

        <link rel="stylesheet" href="../lib/chartist.min.css" />
        <link rel="stylesheet" href="./style.css" />

        <script src="../lib/p5.min.js"></script>
        <script src="../lib/vue.min.js"></script>
        <script src="../lib/dat.gui.min.js"></script>
        <script src="../lib/chartist.min.js"></script>
        <script src="./script.js"></script>
        <script src="./control.js"></script>
    </head>
    <body>
        <h1>covid-19-simulator</h1>
        <div class="wrap">

            <p>
                <strong style="color: #c0392b;"
                    >模拟出来的结果不代表真实结果，请勿信以为真</strong
                >
            </p>
            <hr />
            <div id="data">
                <h2>第{{ DAY }}天</h2>
                <div class="two-parts">
                    <ul id="people-info">
                        <li>总人数: {{ HEALTHY_AMOUNT + UNHEALTHY_AMOUNT }}</li>
                        <li>健康人数: {{ HEALTHY_AMOUNT }}</li>
                        <li>被感染人数: {{ UNHEALTHY_AMOUNT }}</li>
                        <li>被隔离人数: {{ BREAK_AMOUNT }}</li>
                    </ul>
                    <ul id="other-info">
                        <li>床位: {{ BEDS }}</li>
                    </ul>
                </div>
            </div>
            <span><span style="color: #00ff00">⬤</span> 健康的人</span>
            <span><span style="color: #ff0000">⬤</span> 被感染者</span>
            <span><span style="color: #00ffff">⬤</span> 被隔离者</span>

            <p>病情折线图</p>
            <div class="ct-shart" style="width: 800px;" id="chart"></div>
        </div>

        <script src="./displayData.js"></script>
        <script src="./chart.js"></script>
    </body>
</html>
